<template>
  <div>
    <h1>商品列表</h1>
    <table border style="width: 100%">
      <thead>
        <tr>
          <th>#</th>
          <th><input type="checkbox" /> 全选/反选</th>
          <th>商品名称</th>
          <th>商品图片</th>
          <th>商品单价</th>
          <th>商品数量</th>
          <th>商品总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-for="(item, index) in list" :key="item.id">
        <tr>
          <td>{{ 1 + index }}</td>
          <td><input type="checkbox" /></td>
          <td>{{ item.name }}</td>
          <td><img :src="item.img" alt="" width="50px" height="50px" /></td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="item.num--">-</button>
            {{ item.num }}
            <button @click="item.num++">+</button>
          </td>
          <td>{{ item.num * item.price }}</td>
          <td><button @click="list.splice(index, 1)">删除</button></td>
        </tr>
       
      </tbody>
      <tr>
          <td>总计{{ zongji }}</td>
          <td>总数量{{ zongshu }}</td>
        </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "aboutIndex",
  data() {
    return {
      list: [
        {
          id: 1001,
          name: " Beats EP头戴式耳机",
          price: 558,
          type: 4,
          stock: 128,
          sales: 1872,
          img: "https://tenfei03.cfp.cn/creative/vcg/veer/1600water/veer-311347937.jpg",
          num: 1,
        },
        {
          id: 1002,
          name: "雀巢(Nestle)高钙成人奶粉",
          price: 60,
          type: 3,
          stock: 5,
          sales: 2374,
          img: " http://m.360buy'img'.com/babel/jfs/t5197/28/400249159/97561/304ce550/58ff0dbeN88884779.jpg!q50.jpg.webp",
          num: 1,
        },
        {
          id: 1003,
          name: "煎炒烹炸一锅多用",
          price: 216,
          type: 5,
          stock: 2,
          sales: 351,
          img: "http://gw.alicdn.com/tps/TB19OfQRXXXXXbmXXXXL6TaGpXX_760x760q90s150.jpg_.webp",
          num: 1,
        },
        {
          id: 1004,
          name: "'ANNE KLEIN 潮流经典美式轻奢'",
          price: 585,
          type: 2,
          stock: 465,
          sales: 8191,
          img: "http://gw.alicdn.com/tps/TB1l5psQVXXXXcXaXXXL6TaGpXX_760x760q90s150.jpg_.webp",
          num: 1,
        },
        {
          id: 1005,
          name: "'乐高EV3机器人积木玩具'",
          price: 3099,
          type: 1,
          stock: 154,
          sales: 165,
          img: " https://m.360buy'img'.com/mobilecms/s357x357_jfs/t6490/168/1052550216/653858/9eef28d1/594922a8Nc3afa743.jpg!q50.jpg",
          num: 1,
        },
        {
          id: 1006,
          name: "'全球购 路易威登(Louis Vuitton)新款女士LV印花手袋 M41112'",
          price: 10967,
          type: 2,
          stock: 12,
          sales: 6,
          img: "https://m.360buy'img'.com/n1/s220x220_jfs/t1429/17/1007119837/464370/310392f4/55b5e5bfN75daf703.png!q70.jpg",
          num: 1,
        },
        {
          id: 1007,
          name: "'Kindle Paperwhite3 黑色经典版电纸书'",
          price: 805,
          type: 4,
          stock: 3,
          sales: 395,
          img: "http://'img'12.360buy'img'.com/n1/s528x528_jfs/t4954/76/635213328/51972/ec4a3c3c/58e5f717N4031d162.jpg!q70.jpg",
          num: 1,
        },
        {
          id: 1008,
          name: "'DELSEY 男士双肩背包'",
          price: 269,
          type: 2,
          stock: 18,
          sales: 69,
          img: "http://gw.alicdn.com/tps/LB1HL0mQVXXXXbzXVXXXXXXXXXX.png",
          num: 1,
        },
        {
          id: 1009,
          name: "'荷兰 天赋力 Herobaby 婴儿配方奶粉 4段 1岁以上700g'",
          price: 89,
          type: 1,
          stock: 36,
          sales: 1895,
          img: "http://m.360buy'img'.com/babel/s330x330_jfs/t4597/175/4364374663/125149/4fbbaf21/590d4f5aN0467dc26.jpg!q50.jpg.webp",
          num: 1,
        },
        {
          id: 1010,
          name: "'【全球购】越南acecook河粉牛肉河粉特产 速食即食方便面粉丝 牛肉河粉米粉65克*5袋'",
          price: 19.9,
          type: 3,
          stock: 353,
          sales: 3041,
          img: "https://m.360buy'img'.com/mobilecms/s357x357_jfs/t3169/228/5426689121/95568/d463e211/586dbf56N37fcd503.jpg!q50.jpg",
          num: 1,
        },
        {
          id: 1011,
          name: "'正品FENDI/芬迪女包钱包女长款 百搭真皮钱夹 女士小怪兽手拿包'",
          price: 3580,
          type: 2,
          stock: 5,
          sales: 18,
          img: "http://'img'.alicdn.com/'img'extra/i3/TB16avCQXXXXXcsXpXXXXXXXXXX_!!0-item_pic.jpg_400x400q60s30.jpg_.webp",
          num: 1,
        },
      ],
    };
  },
  computed:{
    zongji(){
      let num1=0
      this.list.forEach(item=>{
        num1=item.num*item.price
      })
      return num1
    },
    zongshu(){
      let num2=0
      this.list.forEach(item=>{
        num2+=item.num
      })
      return num2
    }
  }
};
</script>

<style>
td {
  height: 50px;
}
</style>